<template>
	<div class="basicsBox" v-if="isMainPage">
		<div class="filterBox">
      <!-- 只看重要 -->
			<span v-if="['1','3','2'].includes(activeName)">只看重要</span>
			<el-switch
       v-if="['1','3','2'].includes(activeName)"
				v-model="checked"
				class="switch"
				style="--el-switch-on-color: #1356ff; --el-switch-off-color: #f4f5f7"
			/>
      <!-- 包含图片 -->
			<span v-if="['1','3'].includes(activeName)">包含图片</span>
			<el-switch
       v-if="['1','3'].includes(activeName)"
				v-model="checkedImg"
				class="switch"
				style="--el-switch-on-color: #1356ff; --el-switch-off-color: #f4f5f7"
			/>
      <!-- 筛选 -->
			<el-popover
				placement="bottom-start"
				:width="400"
				title="筛选"
				trigger="hover"
         v-if="['1','3'].includes(activeName)"
			>
				<template #reference>
					<div class="shaixuan">
						<img src="@/assets/shaixuan.png" />
						<span>筛选</span>
					</div>
				</template>
				<div class="items">
					<div
						@click="selectItem(item)"
						v-for="(item, index) in buttonList"
						:key="item.id"
						:class="{ active: item.active }"
					>
						{{ item.name }}
					</div>
				</div>
				<div class="btns">
					<el-button color="#1356FF" type="primary" plain @click="resetBtns">重置</el-button>
					<el-button color="#1356FF" type="primary" @click="confirmBtns">确定</el-button>
				</div>
			</el-popover>
      <!-- 订阅 -->
			<Subscribe  v-if="['1','3'].includes(activeName)"/>
		</div>
		<el-tabs v-model="activeName" class="tabs" @tab-change="handleClick">
			<el-tab-pane label="研究员点评" name="1">
				<yjydp :data="yjydpData"
			/></el-tab-pane>
			<el-tab-pane label="数据解读" name="3">
				<sjjd :data="sjjdData" @toDetail="toTrendInfo" />
			</el-tab-pane>
			<el-tab-pane label="快讯" name="2">
				<kx :data="kxData" />
			</el-tab-pane>
			<el-tab-pane label="商品精选配置" name="4">
				<spjxpz :data="spjxpzData" />
			</el-tab-pane>
		</el-tabs>
		<div v-if="isloading" v-loading="isloading" style="height: 80vh"></div>
		<el-empty style="height: 75vh" description="暂无数据" v-show="showEmpty" />
	</div>
	<router-view></router-view>
</template>
<script setup lang="ts">
import Subscribe from './components/Subscribe.vue'
import sjjd from './sjjd.vue'
import kx from './kx.vue'
import yjydp from './yjydp.vue'
import spjxpz from './spjxpz.vue'
import { computed, ref, unref, watch } from 'vue'
import type { TabPaneName } from 'element-plus'
import { useRoute } from 'vue-router'
import { request } from '@/utils/request'
import { useTokenStore } from '@/store/modules/tokenStore'
import router from '@/router'

const route = useRoute()
const isMainPage = computed(() => {
	return route.path === '/home/kpdt'
})
// 从哪一条数据开始查
const startIndex = ref(0)
const startIndexOld = ref(0)
const page = ref(0)
const pageSize = ref(10) // 查询个数

// 快讯
const jsstartIndex = ref(0)
const jsstartIndexOld = ref(0)
// 是否重要
const checked = ref(false)
//包含图片
const checkedImg = ref(false)
//是否研究员动态列表 疑问:如何获取
const isYanjiuyan = ref(false)
// 请输入关键字
const valuefind = ref('')
// 枚举数组
const catalogues = computed(()=>{
  // 获取所有选中的选项的name
  return buttonList.value.filter(({active}) => active).map(({name})=>name)
})
// 研究员id  疑问:如何获取
const yjyid = ref('')
const sjjdData = ref([])
const yjydpData = ref([])
const kxData = ref([])
const spjxpzData = ref([])
const isloading = ref(false)
const activeName = ref('1')
// 疑问 作用是什么？
const tipsMsg = ref(false)
// 点击确定 重置
const filterSearch = ref(false)
const buttonList = ref([
	{
		label: '黑色金属',
		value: '1',
		active: true,
	},
	{
		label: '农产品',
		value: '2',
		active: false,
	},
	{
		label: '有色金属',
		value: '3',
		active: false,
	},
	{
		label: '能源化工',
		value: '4',
		active: false,
	},
	{
		label: '航运指数',
		value: '5',
		active: false,
	},
	{
		label: '行业研究',
		value: '6',
		active: false,
	},
	{
		label: '外汇期货',
		value: '7',
		active: false,
	},
	{
		label: '宏观策略',
		value: '8',
		active: false,
	},
	{
		label: '金工量化',
		value: '9',
		active: false,
	},
	{
		label: '期货综合',
		value: '10',
		active: false,
	},
	{
		label: 'FOF研究',
		value: '11',
		active: false,
	},
	{
		label: '产业研究',
		value: '12',
		active: false,
	},
])
watch(
	() => [checked.value, checkedImg.value, activeName.value,filterSearch.value],
	() => {
		if (activeName.value == '1') {
			getList(0)
		} else if (activeName.value == '3') {
			getColumnList(0)
		} else if (activeName.value == '2') {
			getjinshi(0)
		} else if (activeName.value == '4') {
			getProductConfigList(0)
		}
	},
	{
		immediate: true,
	}
)
const showEmpty = computed(() => {
	let sta = false
	if (isloading.value) {
		return sta
	}
	if (activeName.value == '1' && yjydpData.value.length <= 0) {
		sta = true
	} else if (activeName.value == '3' && sjjdData.value.length <= 0) {
		sta = true
	} else if (activeName.value == '2' && kxData.value.length <= 0) {
		sta = true
	} else if (activeName.value == '4' && spjxpzData.value.length <= 0) {
		sta = true
	}
	return sta
})
const handleClick = (tab: TabPaneName) => {
	// console.log(tab)
	// if (tab=='1') {
	//   getList(0)
	// } else if (tab=='3') {
	//   getColumnList(0)
	// }
}

function selectItem(item: any) {
	item.active = !item.active
	console.log('item', item)
}
async function getbuttonList() {
  try {
    let {data} = await request.post('/wxapi/foreApi/ResearcherDynamic/getVarieties',{})
    let list = []
    data.data.forEach(key=>{
      list.push({
        name: key.name,
        id: key.id,
        active: false
      })
    })
    buttonList.value = list
    console.log('筛选条件',data);
    
  } catch (error) {
    
  }
  
}
getbuttonList()
// 数据解读
function getColumnList(flag: number) {
	let important = null
	if (checked.value == true) {
		important = 1
	}
	if (flag == 0) {
		startIndex.value = 0
		page.value = 0
	}
	//
	let url = '/appletApi/dynamic/getList'
	let data1 = null
	let isConList = false
	if (isYanjiuyan.value == undefined || isYanjiuyan.value == false) {
		if (valuefind.value) {
			url = '/appletApi/dynamic/search2'
			isConList = true
		}
		data1 = {
			lastId: startIndex.value,
			pageSize: pageSize.value,
			tab: 3,
			important: important,
			onlyPics: checkedImg.value,
			catalogues: catalogues.value,
			search: valuefind.value,
		}
	} else {
		url = '/appletApi/dynamic/researcherDynamic'
		data1 = {
			page: page.value,
			pageSize: pageSize.value,
			important: important,
			catalogues: catalogues.value,
			onlyPics: checkedImg.value,
			authorId: yjyid.value,
			tab: 3,
		}
	}
	if (startIndex.value == startIndexOld.value && startIndex.value != 0) {
		//数据加载成功，隐藏加载提示
		isloading.value = false
	} else {
		isloading.value = true
		startIndexOld.value = startIndex.value
		request
			.post('/wxapi' + url, { ...data1 })
			.then(({ data }) => {
				if (isYanjiuyan.value == undefined || isYanjiuyan.value == false) {
					// that.apply(res, flag, isConList);
					console.log('数据解读列表', data.data)
					sjjdData.value = data.data
				} else {
					console.log('数据解读列表', data)
					// that.apply2(res, flag, that.data.page);
				}
			})
			.finally(() => {
				isloading.value = false
			})
	}
}
//研究员点评
function getList(flag: number) {
	let important = null
	if (checked.value == true) {
		important = 1
	}
	if (flag == 0) {
		startIndex.value = 0
		page.value = 0
	}
	//
	let url = ''
	let data1 = null
	let isConList = false
	if (isYanjiuyan.value == undefined || isYanjiuyan.value == false) {
		url = '/appletApi/dynamic/getList'
		if (valuefind.value) {
			url = '/appletApi/dynamic/search2'
			isConList = true
		}
		data1 = {
			lastId: startIndex.value,
			pageSize: pageSize.value,
			tab: 1,
			important: important,
			onlyPics: checkedImg.value,
			catalogues: catalogues.value,
			search: valuefind.value,
		}
	} else {
		url = '/appletApi/dynamic/researcherDynamic'
		data1 = {
			page: page.value,
			pageSize: pageSize.value,
			important: important,
			catalogues: catalogues.value,
			onlyPics: checkedImg.value,
			authorId: yjyid.value,
			tab: 1,
		}
	}
	if (startIndex.value == startIndexOld.value && startIndex.value != 0) {
		//数据加载成功，隐藏加载提示
		isloading.value = false
	} else {
		isloading.value = true
		startIndexOld.value = startIndex.value
		request
			.post('/wxapi' + url, { ...data1 })
			.then(({ data }) => {
				if (isYanjiuyan.value == undefined || isYanjiuyan.value == false) {
					// that.apply(res, flag, isConList);
					yjydpData.value = data.data

					console.log('研究员点评列表', yjydpData.value)
				} else {
					console.log('研究员点评列表', data)
					// that.apply2(res, flag, that.data.page);
				}
			})
			.finally(() => {
				isloading.value = false
			})
	}
}
// 快讯数据
function getjinshi(flag: number) {
	let important = null
	if (checked.value == true) {
		important = 1
	}
	if (flag == 0) {
		startIndex.value = 0
		page.value = 0
	}
	let url = '/appletApi/dynamic/getList'
	let isConList = false
	if (valuefind.value) {
		url = '/appletApi/dynamic/search2'
		isConList = true
	}
	if (jsstartIndex.value == jsstartIndexOld.value && jsstartIndex.value != 0) {
		isloading.value = false
	} else {
		isloading.value = true
		jsstartIndexOld.value = jsstartIndex.value
		let data1 = {
			lastId: jsstartIndex.value,
			pageSize: pageSize.value,
			tab: 2,
			important: important,
			onlyPics: checkedImg.value,
			search: valuefind.value,
		}
		request
			.post('/wxapi' + url, { ...data1 })
			.then(({ data }) => {
				kxData.value = data.data
			})
			.finally(() => {
				isloading.value = false
			})
	}
}
// 商品精选配置
function getProductConfigList(flag: number) {
	if (flag == 0) {
		startIndex.value = 0
		page.value = 0
	}

	const params = {
		page: page.value,
		pageSize: pageSize.value,
		columnId: '267',
		columnFilter: '{"timeFilter":2}',
		queryDays: [],
	}

	isloading.value = true

	request
		.post('/wxapi/appletApi/column/columnList2', { ...params })
		.then(({ data }) => {
			console.log('商品精选配置', data)

			spjxpzData.value = data.data.list
		})
		.finally(() => {
			isloading.value = false
		})
}
function confirmBtns() {
  filterSearch.value = !filterSearch.value
}
function resetBtns() {
  buttonList.value.forEach(key=>{
    key.active = false
  })
  filterSearch.value = !filterSearch.value
}
//跳转动态详情
  function  toTrendInfo(e:any) {
      const item = e;
      console.log('item?',item);
      
      // 疑问 注释部分为神策埋点需要  vue没有e.currentTarget.dataset
      // let tags = new Array();
      // if (e.currentTarget.dataset.tag) {
      //   tags.push(e.currentTarget.dataset.tag);
      // }
      // let pusher = new Array();
      // if (e.currentTarget.dataset.pusher) {
      //   pusher = e.currentTarget.dataset.pusher.split("、");
      // }

      //神策埋点\微信小程序_热点动态列表页_按钮点击
      // let content_type = "";
      // if (e.currentTarget.dataset.content != null) {
      //   content_type = e.currentTarget.dataset.content;
      // }
      // let article_title = "";
      // if (e.currentTarget.dataset.title != null) {
      //   article_title = e.currentTarget.dataset.title;
      // }
      // content_type = "研究员点评";
      // let info_source = "";
      // if (activeName.value === 'researcher') {
      //   content_type = "研究员点评";
      // } else if (activeName.value === 'explain') {
      //   content_type = "数据解读";
      // } else if (activeName.value === 'jinshi') {
      //   content_type = "快讯";
      //   info_source = "金十";
      // } else if (activeName.value === 'duoyuan') {
      //   content_type = "多元信号"
      // } else if (activeName.value === 'productConfig') {
      //   content_type = "商品精选配置"
      // }

      // let futuresSpecies = new Array();
      // if (item.varietyInfos && item.varietyInfos.length > 0) {
      //   item.varietyInfos.forEach(it => {
      //     futuresSpecies.push(it.name);
      //   })
      // }

      // let typeList = [];
      // if (activeName.value === 'duoyuan') {
      //   this.data.duoyuanCheckList.forEach(item => {
      //     if (item.isChecked) {
      //       typeList = [item.name];
      //     }
      //   })
      // } else 
      // if(activeName.value === 'productConfig'){
      //   typeList = [];
      // } else {
      //   typeList = catalogues.value
      // }

      // 疑问 神策
      // getApp().sensors.track('MP_HitTopicList_BtnClick', {
      //   previous_page_name: '首页', //前向页面名称
      //   article_id: e.currentTarget.dataset.text, //文章id
      //   article_title: article_title, //文章标题
      //   content_type: content_type, //内容类型
      //   article_type_list: tags, //文章类型列表
      //   analyst_list: pusher, //研究员列表
      //   info_source: info_source, //信息来源
      //   first_category: '动态详情', //一级分类 
      //   type_list: typeList,
      //   icon_name: "动态详情", //按钮名称
      //   futures_category: item.catalogue ? item.catalogue : '', //期货类别
      //   futures_variety: futuresSpecies //期货品种
      // });


      let authStatus = useTokenStore()?.userInfo?.authStatus
      //访客不用校验 
      if (authStatus == 0 && useTokenStore().isLoggedIn) {
        const isConfirmed = confirm('您还没有进行实名认证,暂时无法看此内容,点击确定前往认证？');
      if(isConfirmed) {
        // 疑问 前往认证页
        //  wx.navigateTo({
        //     url: '/pages/identify/index',
        //   })
      }
      } else {
        if (!useTokenStore().isLoggedIn || e.lock == true) {
          const tabactive = activeName.value;

          if (tabactive !== "4") {
            // window.location.href = 'http://localhost:8081/home/kpdt/sjjdxq?id=2'
            router.push({name:`sjjdxq`,query: {
              trendId: e.id,
              pageIndex: 'hotTrends',
              // lastpageIndex: e.lastpageIndex,
              // isYanjiuyan: e.isYanjiuyan,
              // yjyid: e.yjyid,
              // tabactive: e.tabactive,
              // tabType: e.tabType,
            }})
            // wx.navigateTo({
            //   url: '/pages/trendInfo/index?trendId=' + e.currentTarget.dataset.text + "&pageIndex=hotTrends&lastpageIndex=" + this.data.lastpageIndex + "&isYanjiuyan=" + this.data.isYanjiuyan + "&yjyid=" + this.data.yjyid + "&tabactive=" + activeName.value + "&tabType=" + (item.tabType ? item.tabType : ''),
            // })
          } else {
            if(!useTokenStore().isLoggedIn) {
              alert('请登录后再查看')
              // wx.showToast({
              //   title: '请登录后再查看',
              //   icon: 'none'
              // })
              return;
            }

            gotoProductConfig(item);
          }
        } else {
          tipsMsg.value = true
        }
      }
    }
function gotoProductConfig(item) {
      const {
        id,
        classify
      } = item;

      request.post('/appletApi/column/columnDetail',{
        classify: classify,
          sourceId: id
      }).then(res=>{
        if (res.data.code == 1) {
            const src = res.data.data;
            // 疑问 长图页面怎么处理?是否跳原生页面
            // handleGotoFlowPage(src);
          } else if (res.data.status == 401) { // token失效
            // Toast({
            //   message: res.data.msg,
            //   duration: 2000,
            //   onClose: () => {
            //     wx.reLaunch({
            //       url: '/pages/login/index',
            //     })
            //   },
            // });

            return
          } else {
            wx.showToast({
              title: res.data.message,
              icon: 'none',
              duration: 2000
            })
          }
      })
    }
</script>
<style scoped lang="less">
.basicsBox {
	padding-top: 20px;
	position: relative;
	.filterBox {
    z-index: 999;
		position: absolute;
		right: 3.125rem;
		top: 15px;
		color: #b4b7c2;
		font-size: 14px;
		display: flex;
		align-items: center;
		> span {
			margin-right: 13px;
		}
		> .switch {
			margin-right: 1.875rem;
		}
		.shaixuan {
			margin-left: 1.25rem;
			cursor: pointer;
			display: flex;
			align-items: center;
			> img {
				width: 20px;
				height: 20px;
        margin-right: 3px;
			}
		}
	}
}
:deep(.el-tabs__item) {
	font-size: 18px;
	font-weight: 600;
}

.items {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* 3列，每列等宽 */
	gap: 10px; /* 网格间隙 */
  margin-bottom: 10px;
	> div {
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 13px;
		color: @color-636976;
		background: #fafafb;
		border-radius: 10px;
		cursor: pointer;
	  padding: 10px;
    border: 1px solid rgba(0,0,0,0);
	}
	.active {
		border: 1px solid @color-1356FF;
		background-image: url('@/assets/home/xuanzhong.png'); /* 替换为你的图片路径 */
		background-repeat: no-repeat; /* 防止图片重复 */
		background-position: top right; /* 图片定位在右上角 */
		background-size: 20px 20px;
	}
}
.btns {
	width: 100%;
	display: flex;
	> button {
		flex: 1;
	}
}
/* 当一行能放下所有元素时，改为两端对齐 */
@media (max-width: 1020px) {
	/* 根据实际项目调整断点 */
	.basicsBox {
		padding-top: 0px;
		.filterBox {
			position: relative;
			display: flex;
			justify-content: flex-end;
		}
	}
}
:deep(.el-tabs__item.is-active) {
	color: @color-1356FF !important;
}
:deep(.el-tabs__item:hover) {
	color: @color-1356FF !important;
}
:deep(.el-tabs__item.is-active, .el-tabs__item:hover) {
	color: @color-1356FF !important;
}
:deep(.el-tabs__active-bar) {
	background-color: @color-1356FF !important;
}
</style>
